<template>
    <!-- 我的  --（未登录页面）     -->
    <!-- 需要填写 路由   登录页面 -->
    <div>
        <div class="bgc"></div>
        <div class="mainbox">
            <!-- 用户信息 -->
            <div class="userinfo">
                <!-- 头像 -->
                <!-- 跳转至    登录      -->
                <div class="left touxiang">
                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4355.png"
                        class="left">
                </div>
                <div class="yonghu left">
                    <!-- 用户昵称 -->
                    <!-- 跳转至    登录      -->
                    <p>登录/注册</p>
                </div>
                <!-- 前往签到 -->
                <!-- 跳转至    登录      -->
                <div class="qiandao">
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4388.png">
                </div>
            </div>
            <!-- 开通会员 -->
            <!-- 跳转至    登录      -->
            <div class="huiyuan">
                <img src="https://cdn7.axureshop.com/demo/1182587/images/%E4%BC%9A%E5%91%98%E4%B9%A6%E7%B1%8D/%E8%B7%AF%E5%BE%84_4523_u2067.png"
                    alt="">
                <span>开通易阅读会员&nbsp;免费畅享阅读</span>
                <span class="kaitong">立即开通 <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E4%BC%9A%E5%91%98%E4%B9%A6%E7%B1%8D/%E8%B7%AF%E5%BE%84_u2066.png"
                        alt=""></span>
            </div>
            <!-- 阅读记录 -->
            <ul class="yuedu">
                <!-- 跳转至    登录      -->
                <li v-for="(item, index) in yuedu" :key="index">
                    <p>{{ item.num }}</p>
                    <p>{{ item.title }}</p>
                </li>

            </ul>
            <!-- 功能列表 -->
            <ul class="gongneng">
                <!-- 跳转至   阅读偏好  书架--阅读历史 消息通知  系统设置 意见反馈-->
                <li @click="gopage()">
                    <div>
                        <div>
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4377.png"
                                class="iconimg">
                            <img src="" class="icon">
                        </div>
                        <span>阅读偏好</span>
                    </div>
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/%E8%B7%AF%E5%BE%84_u4375.png">
                </li>
                <li @click="gopage()">
                    <div>
                        <div>
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4395.png"
                                class="iconimg">
                            <img src="" class="icon">
                        </div>
                        <span>我的足迹</span>
                    </div>
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/%E8%B7%AF%E5%BE%84_u4375.png">
                </li>
                <li @click="gopage()">
                    <div>
                        <div>
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4402.png"
                                class="iconimg">
                            <img src="" class="icon">
                        </div>
                        <span>消息通知</span>
                    </div>
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/%E8%B7%AF%E5%BE%84_u4375.png">
                </li>
                <li @click="gopage()">
                    <div>
                        <div>
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4409.png"
                                class="iconimg">
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4410.png"
                                class="icon4">
                        </div>
                        <span>系统设置</span>
                    </div>
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/%E8%B7%AF%E5%BE%84_u4375.png">
                </li>
                <li @click="gopage()">
                    <div>
                        <div>
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4420.png"
                                class="iconimg">
                            <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4418.png"
                                class="icon5">
                        </div>
                        <span>阅读偏好</span>
                    </div>
                    <img
                        src="https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/%E8%B7%AF%E5%BE%84_u4375.png">
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MynotLogin',

    data() {
        return {
            user: {
                name: "用户10293",
                picture: "https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u4474.png"
            },
            yuedu: [{
                title: "阅读币",
                num: "0",
                url: ""
            },
            {
                title: "笔记",
                num: "0",
                url: ""
            },
            {
                title: "书单",
                num: "0",
                url: ""
            },
            {
                title: "阅历",
                num: "0",
                url: ""
            }],

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.bgc {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    height: 23.6rem;
    background: url("https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/rectangle_56_u4351.png") no-repeat;
    background-size: cover;
    z-index: -1;
}

.mainbox {
    font-size: 1.6rem;
    padding: 2rem;
    // padding-top: 6rem;
    text-align: left;
    position: relative;

    .userinfo {
        height: 6.2rem;
        position: relative;

        .touxiang {
            width: 6.2rem;
            height: 6.2rem;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;

            img {
                width: 50%;
            }
        }


        .yonghu {
            font-weight: bold;
            margin-left: 1.5rem;
            line-height: 2rem;
            font-size: 2rem;
            height: 100%;
            display: flex;
            align-items: center;

            .bianji {
                font-size: 1.2rem;
                font-weight: 100;
                cursor: pointer;
                color: gray;
            }
        }

        .qiandao {
            position: absolute;
            right: 0rem;
            top: 0rem;
            width: 2.3rem;
            height: 2.3rem;
            background: url("https://cdn7.axureshop.com/demo/1182587/images/%E6%88%91%E7%9A%84%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u4387.png") no-repeat;
            text-align: center;
            background-size: 2.3rem 2.3rem;

            img {
                margin-top: 0.8rem;
                width: 1rem;
                height: 0.7rem;
            }
        }
    }

    .huiyuan {
        height: 4.8rem;
        line-height: 4.8rem;
        font-size: 1.4rem;
        color: #FFE3BE;
        background: linear-gradient(97deg, rgba(77, 77, 78, 1) 0%, rgba(77, 77, 78, 1) 0%, rgba(29, 29, 29, 1) 100%, rgba(29, 29, 29, 1) 100%);
        margin-top: 2rem;
        padding: 0 1rem;
        border-radius: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >img {
            width: 2rem;
            height: 1.7rem;
        }

        .kaitong {
            display: block;
            background-color: rgba(255, 227, 190, 1);
            color: #000;
            height: 2.4rem;
            line-height: 2.4rem;
            font-size: 1.2rem;
            padding: 0 0.8rem;
            border-radius: 1.2rem;
            img{
                width: 0.4rem;
                height: 0.8rem;
            }
        }

    }

    .yuedu {
        margin-top: 1.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 0 0.5rem rgb(208, 208, 208);
        font-size: 1.2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
            text-align: center;
            padding: 0.8rem 0;

            p:nth-of-type(1) {
                font-weight: bold;
                font-size: 1.6rem;
            }

            p {
                line-height: 2.6rem;
            }
        }

    }

    .gongneng {

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 6rem;
            border-bottom: 0.1rem solid #f1f1f1;

            >div {
                display: flex;
                align-items: center;

                >div {
                    position: relative;
                    display: flex;
                    align-items: center;

                    .iconimg {
                        width: 1.7rem;
                        height: 1.7rem;
                    }

                    .icon4 {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 0.8rem;
                        height: 0.8rem;
                    }

                    .icon5 {
                        position: absolute;
                        right: 30%;
                        top: 30%;
                        transform: translate(50%, -50%);
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                }

                span {
                    margin-left: 1rem;
                }

            }
        }

        li:last-child {
            border: 0;
        }
    }
}
</style>